<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .move {
            width: 100px;
            height: 100px;
            background-color: rgb(202, 206, 226);
            position: absolute;
            left: 0;
        }
        
        #moveDiv1 {
            left: 200px;
            top: 300px;
            background-color: rgb(160, 111, 111);
        }
    </style>
</head>

<body>
    <h1>JS动画</h1>
    <h2>移动</h2>
    <button id="moveBtn">点击移动</button>
    <button id="mvoeXBtn">点击X轴移动</button>

    <div class="move" id="moveDiv"></div>
    <input type="text" id="des" placeholder="输入目的地坐标">
    <button id="moveXYBtn">点击xy移动</button>
    <div class="move" id="moveDiv1"></div>
    <script>
        var moveBtn = document.getElementById('moveBtn');
        var moveDiv = document.getElementById('moveDiv');

        moveBtn.onclick = function() {
            var left = 0;
            var timer = setInterval(function() {
                if (left >= 500) {
                    clearInterval(timer);
                    return
                }
                left += 10;
                moveDiv.style.left = left + "px"
            }, 20);

        }

        //X轴移动函数
        function moveX(el, des) {
            //el移动的元素
            //des移动的目的地
            el.style.position = "absolute";
            var x = 0;
            var timer = setInterval(function() {
                if (x >= des) {
                    //如果现在的位置大于目标位置则清除定时器，马上结束函数
                    clearInterval(timer);
                    return
                }
                x += 10;
                moveDiv.style.left = x + "px"
            }, 20);
        }

        function moveX1(el, des, time) {
            //el移动的元素
            //des移动的目的地
            //time 移动的时间单位是毫秒
            el.style.position = "absolute";
            //每一毫秒移动的距离，也就是速度
            var speed = des / time
            var x = 0;
            var timer = setInterval(function() {
                if (x >= des) {
                    //如果现在的位置大于目标位置则清除定时器，马上结束函数
                    clearInterval(timer);
                    return
                }
                x += speed * 20;
                moveDiv.style.left = x + "px"
            }, 20);
        }

        var mvoeXBtn = document.getElementById('mvoeXBtn');
        mvoeXBtn.onclick = function() {
            moveX(moveDiv, 800)
        }
        mvoeXBtn.onclick = function() {
            moveX1(moveDiv, 900, 5000)
        }

        function move(el, des, time) {
            //判断元素的data-animation是否为true，也就是元素是否在移动中
            if (el.dataset.animation == "true") {
                //如果元素在移动则结束整个函数
                return
            }
            el.style.position = "absolute";
            //开始移动设置元素的data-animaiton为true，表明元素正在运动
            el.dataset.animation = true
                //获取元素移动之前的位置坐标
            var pos = el.getBoundingClientRect();
            //初始化元素现在的坐标，初始化值为元素移动前的位置
            var curPos = {
                    x: pos.x,
                    y: pos.y
                }
                //计算x,y轴的移动速度
            var speedX = (des.x - pos.x) / time;
            var speedY = (des.y - pos.y) / time;
            //设置定时器
            var timer = setInterval(function() {
                //判断移动是否结束
                if (pos.x < des.x && curPos.x > des.x || pos.x > des.x && curPos.x < des.x) {
                    //两种可能性，第一种：元素现在的位置x小于目的地x，当元素的位置只要一大于目的地位置就结束
                    //第二种：元素现在的位置x大于目的地x，当元素的位置只要一小于目的地位置就结束
                    //如果现在的位置大于目标位置则清除定时器，马上结束函数
                    clearInterval(timer);
                    //移动结束后给元素设置一个自定义属性data-animation
                    el.dataset.animation = false
                    return
                }
                //每运行一次增加当前位置
                curPos.x += speedX * 20
                curPos.y += speedY * 20
                el.style.left = curPos.x + "px"
                el.style.top = curPos.y + "px"

            }, 20)
        }
        var moveXYBtn = document.getElementById('moveXYBtn');
        var moveDiv1 = document.getElementById('moveDiv1');
        var desIpt = document.getElementById('des')


        moveXYBtn.onclick = function() {
            //从输入框获取输入内容，并把输入的字符串分割成数组
            var desArray = desIpt.value.split(',')
                //生成目的地坐标对象
            var des = {
                    x: desArray[0],
                    y: desArray[1]
                }
                //调用移动函数
            move(moveDiv1, des, 1000)
        }
    </script>
</body>

</html>